<template>
    <section>


        <!--高级查询-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true">
                <el-form-item>
                    <el-input v-model="title1" placeholder="宠物信息"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" v-on:click="getUsers">查询</el-button>
                </el-form-item>

            </el-form>
        </el-col>
        <!--列表展示-->
        <el-table :data="processlist" highlight-current-row v-loading="listLoading"
                  style="width: 100%;">
            <el-table-column type="index" width="60"></el-table-column>
            <el-table-column prop="title" label="主题"></el-table-column>
            <el-table-column prop="name" label="宠物名"></el-table-column>
            <el-table-column prop="age" label="宠物年龄"></el-table-column>
            <el-table-column prop="gender" label="宠物性别">
                <template scope="scope">
                    <span style="color: green" v-if="scope.row.gender===1">公</span>
                    <span style="color: red" v-else-if="scope.row.gender===0">母</span>
                </template>
            </el-table-column>
            <el-table-column prop="coatColor" label="宠物毛色"></el-table-column>
            <el-table-column prop="type.name" label="宠物类型"></el-table-column>
            <el-table-column prop="price" label="宠物价格"></el-table-column>
            <el-table-column prop="address" label="收购地址"></el-table-column>
            <el-table-column prop="user.username" label="发布人">
                <template scope="scope">
                    <span>{{scope.row.user.username||scope.row.user.phone||scope.row.user.email}}</span>
                </template>
            </el-table-column>
            
        </el-table>
        <!--工具条-->
        <el-col :span="24" class="toolbar">

            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize"
                           :total="total" style="float:right;">
            </el-pagination>
        </el-col>
    </section>
</template>

<script>
    /*富文本编辑器*/
    import {quillEditor} from "vue-quill-editor"; //调用编辑器
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    /*图片再富文本里面上传，返回上传的url*/
    import quillconfig from "../../common/quill-config"

    export default {
        /*暴露组件*/
        components: {
            quillEditor
        },
        data() {
            return {
                //引用的quill-config.js
                editorOption: quillconfig,
                addFormRules: {
                    //验证规则
                    name: [
                        {required: true, message: '请输入内容', trigger: 'blur'},
                        {min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur'}
                    ]
                },
                //高级查询字段
                title1: '',
                //列表展示
                processlist: [],
                //页面加载
                listLoading: '',
                currentPage: 1,
                pageSize: 5,
                total: 0,

                addFormLabelWidth: '120px',

            }
        },
        methods: {

            //重置。点击取消
            resetForm(addForm) {
                // this.$refs[addForm].resetFields();
                this.dialogFormVisible = false
            },

            //高级查询
            getUsers() {
                //跳转到第一页查询
                this.currentPage = 1
                this.loadData()
            },

            //加载数据
            loadData() {
                let params = {
                    localPage: this.currentPage, //加载默认参数
                    pageSize: this.pageSize,
                    title: this.title1,
                    state: 1
                }
                //请求地址  then请求成功  catch请求失败
                this.$http.post("/searchMasterMsg/process", params).then(res => {
                    let {data, totals} = res.data; //解构
                    this.processlist = data;
                    this.total = totals;
                }).catch()
            },
            //点击分页,更改当前页
            handleCurrentChange(val) {
                // console.log(val)
                this.currentPage = val;
                this.loadData()
            },
        },
        mounted() {
            //加载完毕之后执行
            this.loadData()
        }
    }
</script>

<style scoped>

</style>